<!-- Dom模板 -->
<template>
  <div class="imageDeatils">
    <!-- Dom内容 -->
    <!-- 左边 -->

    <div class="left column">
      <p class="left-top">
        <span
          v-for="(item, index) in images.imgs[xuanImgs]"
          :key="index"
          @click="nums = index"
        >
          <img :src="item" alt="" />
        </span>
      </p>
      <p class="left-bottom">
        <span class="column">
          <img src="/images/jiantou.svg" alt="" />
          <small>分享</small>
        </span>
        <span class="column">
          <img src="/images/xin.svg" alt="" />
          <small>收藏</small>
        </span>
      </p>
    </div>
    <!-- 中间 -->
    <div class="center">
      <div
        @mouseleave="hoverleave"
        @mousemove="hoverMover"
        @mouseover="hoverouver"
        @wheel="guenluen"
        class="imgLeft"
        ref="imgLeft"
      >
        <img :src="lookImageSmall()" alt="" />
        <div
          v-show="imgShow"
          class="zhezhao"
          ref="zhezhao"
          :style="{
            width: w + 'px',
            height: h + 'px',
            top: tops + 'px',
            left: lefts + 'px',
            borderWidth: borderW + 'px',
          }"
        ></div>
      </div>

      <div v-show="imgShow" class="imgRight">
        <img
          :style="{
            width: dingImgW + 'px',
            height: dingImgH + 'px',
            left: bigLeft + 'px',
            top: bigTop + 'px',
          }"
          :src="lookImageBig()"
          alt=""
        />
      </div>
    </div>

    <!-- 右边 -->
    <div class="right">
      <p class="column top">
        <small> {{textt.type}} </small>
        <strong>
         {{textt.name}} 
        </strong>
        <small> 款号:{{textt.id}} </small>
        <b> ￥{{textt.money}}  </b>
      </p>
      <p>
        <img
          v-for="(item, index) in selectImg.imgs"
          @click="tagImg(selectImg.imgsParentName[index])"
          :key="index"
          :src="item"
          alt="图片放飞自我了"
        />
      </p>
      <el-divider></el-divider>
      <div class='sapcebetton row'>
        <el-select 
        popper-class='aaa'
         v-model="value" placeholder="请选择">
          <el-option
          
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>

        <el-select style="border: none" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
       
      </div>

        <div>
           <el-divider></el-divider>

        <el-select style="border: none !important;" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-divider></el-divider>
        </div>
      <div class="button row">
        <p>加入购物车</p>
        <p>立即购买</p>
      </div>
  

    </div>

    
  </div>
</template>

<script>
// import a from './a'; // 引入组件
let vm = {};
export default {
    // props:["images","textt"],
  props: {
    images: {
      type: Object,
      default: {},
    },
    textt:{
      type:Object,
      default:{}
    }
  },
  name: "",
  data() {
    vm = this;
    return {
      msg: "测试",
      xuanImgs: "",
      nums: 0,
      lookImageSmall: () => {
        if (this.xuanImgs != false) {
          return this.images.imgs[this.xuanImgs][this.nums];
        }
      },
      lookImageBig() {
        if (this.xuanImgs != false) {
          return this.images.imgb[this.xuanImgs][this.nums];
        }
      },
      lefts: 0,
      tops: 0,
      w: 100,
      h: 100,
      imgShow: false,
      bigLeft: 0,
      bigTop: 0,
      borderW: 1,
      dingImgW: 509 * 2,
      dingImgH: 393 * 2,
      calcNum: 0,
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      value: "",
    };
  },
  computed: {
    selectImg() {
      // 右边的img选择图片 颜色类的选择
      let imgs = [];
      let imgsParentName = [];
      for (var key in this.images.imgs) {
        imgs.push(this.images.imgs[key][0]);
        imgsParentName.push(key);
      }

      this.xuanImgs = imgsParentName[0];
      return { imgs, imgsParentName };
    },
  },
  filters: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    tagImg(e) {
      this.xuanImgs = e;
    },
    hoverouver() {
      this.imgShow = true;
    },
    hoverleave() {
      this.imgShow = false;
      this.w = 100;
      this.h = 100;
      this.dingImgW = 509 * 2;
      this.dingImgH = 393 * 2;
      this.calcNum = 0;
    },
    hoverMover(e) {
      // console.log(this.$refs.zhezhao);
      // 大图img图片容器宽高
      let bigImgW = 509;
      let bigImgH = 393;
      // 小图图片容器宽高
      let zongH = e.target.offsetHeight;
      let zongW = e.target.offsetWidth;
      // 遮罩层根据鼠标移动并 让鼠标居中与遮罩层中心
      this.lefts = e.offsetX - this.w / 2 - this.borderW;
      this.tops = e.offsetY - this.h / 2 - this.borderW;
      // 算遮罩层和其容器的比列  small
      // 算大img和其容器的比列  big
      // 算 small 和 big 的比列
      let sxX = zongW - this.w;
      let bxX = bigImgW * 2 - bigImgW;
      let xx = sxX / bxX;

      let syY = zongH - this.h;
      let byY = bigImgH * 2 - bigImgH;
      let yy = syY / byY;
      // 根据比列算遮罩移动多少 大图相对应移动多少
      this.bigLeft = -this.lefts / xx;
      this.bigTop = -this.tops / yy;

      // 遮罩层限位 判断
      if (this.lefts <= -this.borderW) {
        this.lefts = -this.borderW;
      }
      if (this.lefts >= zongW - (this.w + this.borderW)) {
        this.lefts = zongW - (this.h + this.borderW);
      }
      if (this.tops <= -this.borderW) {
        this.tops = -this.borderW;
      }

      if (this.tops >= zongH - (this.h + this.borderW)) {
        this.tops = zongH - (this.h + this.borderW);
      }
    },
    guenluen(e) {
      if (e.deltaY > 0 && this.calcNum < 8) {
        this.calcNum++;

        this.w += 10;
        this.h += 10;
        this.dingImgW -= 20;
        this.dingImgH -= 20;
        this.bigLeft += 25;
        this.bigTop += 25;
        this.hoverMover(e);
      } else if (e.deltaY < 0 && this.calcNum > -8) {
        console.log(this.calcNum);
        this.calcNum--;
        this.w -= 10;
        this.h -= 10;
        this.dingImgW += 20;
        this.dingImgH += 20;
        this.bigLeft -= 25;
        this.bigTop -= 25;
        this.hoverMover(e);
      }

      e.preventDefault();
    },
  },
};
</script>

<style lang='scss' scoped>
/* @import url(''); 引入css类 */
.imageDeatils {
  width: 1300px;
  height: 600px;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  margin: 30px auto;
 margin-bottom:100px;
}

.center:hover {
  cursor: crosshair;
}

.left {
  width: 70px;
  justify-content: space-between;
  margin-top: 10px;
  img {
    width: 100%;
    height: 70px;
  }
  .left-top {
    height: 70%;
    > span {
      display: inline-block;
      border: 1px solid grey;
      width: 100%;
      height: 70px;
    }
  }
  .left-bottom {
    span {
      text-align: center;
      height: 70px;
      margin-top: 10px;
    }
    img {
      width: 50%;
      height: 70%;
      margin: 0 auto;
      & :nth-child(2) {
        width: 30%;
      }
    }
  }
}

.center {
  width: 700px;
  height: 594px;
  position: relative;
  border: 1px solid grey;
  background: white;
  margin-left: 30px;

  .imgLeft {
    height: 100%;
    position: relative;
    overflow: hidden !important;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgRight {
    position: absolute;
    right: -519px;
    top: -1px;
    width: 509px;
    height: 393px;
    border: 1px solid grey;
    overflow: hidden;
    background: white;
    z-index:999;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
    }
  }
  .zhezhao {
    width: 100px;
    height: 100px;
    background: rgba(185, 174, 174, 0.3);
    border: 100px solid rgba(185, 174, 174, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    // box-sizing: border-box;
  }
}
.right {
  width: calc(100% - 730px);
  margin-left: 30px;

  p {
    img {
      border: 1px solid grey;
      margin-right: 10px;
    }
  }
   .sapcebetton{
     justify-content: space-between;
   }
  .top {
    height: 25%;
    justify-content: space-around;
    margin-top: 3px;
    margin-bottom: 10%;
  }
  .button {
    justify-content: space-between;
    p {
      width: 40%;
      height: 50px;
      border: 1px solid black;
      line-height: 50px;
      text-align: center;
    }
    p:nth-child(2) {
      background: black;
      color: white;
    }
  }
}
small{
  color:grey;
  font-size:14px;
}
strong{
  font-size:22px;
  font-weight:500;

}


.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 14px 0;
 
}


 .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    outline:none !important;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
</style>